<template>
	<view class="">
		<view class="padding-30 fontSize-14 color-000 bg-fff">
			HZ-GS-G2504-JC002-SB3
		</view>
		<!-- 分类 -->
		<view class="padding-20">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</view>
		<!-- 图表 -->
		<view class=""></view>
		<!-- 列表 -->
		<view class="padding-20">
			<view class="echart-list">
				<view class="fontSize-14 color-000 margin-bottom30">数据明细(近七天)</view>
				<!-- 表格 -->
				<view class="table-list">
					<view class="echart-title">
						设备编码 HZ-GS-G2504-JC002-SB3
					</view>
					<!-- 表头 -->
					<view class="flex-between padding-30 table-item">
						<view class="xuhao flex-center">序号</view>
						<view class="time flex-center">数据采集时间</view>
						<view class="jiao flex-center">X向倾角</view>
					</view>
					<!-- 表格 -->
					<view class="flex-between padding-30 table-item">
						<view class="xuhao flex-center">1</view>
						<view class="time flex-center">2024-09-01 14:00:12</view>
						<view class="jiao flex-center">-0.5380°</view>
					</view>
					<view class="flex-between padding-30 table-item">
						<view class="xuhao flex-center">1</view>
						<view class="time flex-center">2024-09-01 14:00:12</view>
						<view class="jiao flex-center">-0.5380°</view>
					</view>
					<view class="flex-between padding-30 table-item">
						<view class="xuhao flex-center">1</view>
						<view class="time flex-center">2024-09-01 14:00:12</view>
						<view class="jiao flex-center">-0.5380°</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: 'X向倾角',
				}, {
					name: 'X倾角变化',
				}, {
					name: 'X累计倾角'
				}, {
					name: 'Y向倾角'
				}, {
					name: 'Y倾角变化'
				}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-item:last-child{
		border-bottom: none;
	}
	.table-item{
		border-bottom: 1px solid #E6E6E6;
	}
	.jiao{
		width: 150rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4B6DFD;
		flex-shrink: 0;
	}
	.time{
		flex-shrink: 0;
		font-weight: 400;
		font-size: 28rpx;
		color: #323232;
		flex-shrink: 0;
	}
	.xuhao{
		width: 100rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #323232;
		flex-shrink: 0;
	}
	.echart-title{
		font-size: 14px;
		color: 000000;
		padding: 30rpx;
		background: #F3F3F3;
		border-bottom: 1px solid #E6E6E6;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.table-list{
		border: 1px solid #E6E6E6;
		width: 100%;
	}
	.echart-list{
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
</style>